<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="full-screen" content="yes">
    <meta name="x5-fullscreen" content="true">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
    <link rel="stylesheet" href="../../css/base.css">
    <link rel="stylesheet" href="../../css/icon-font.css"/><!--图标-->

    <title>消息设置</title>
    <style>
        .news-set-tz {
            margin-top: 0.16rem;
            padding: 0.22rem 0.32rem 0.24rem 0.32rem;
            background-color: white;
        }

        .news-set-tip {
            color: rgba(34, 34, 34, 0.45);
            margin-top: 0.04rem;
        }

        .news-set-kg {
            color: rgba(34, 34, 34, 0.45);
            line-height: 0.36rem;
        }

        .news-set-ts {
            padding: 0.36rem 0.32rem 0.2rem 0.32rem;
            color: rgba(34, 34, 34, 0.6);
        }

        .news-set-wrap {
            background-color: white;
            padding: 0 0.32rem;
            color: #222222;
        }

        .news-set-item {
            padding: 0.36rem 0 0.34rem 0;
            border-bottom: 1px solid #F2F2F2;
        }

        .news-set-switch {
            width: 0.92rem;
            /*height:0.58rem;*/
        }


        .news-set-checkbox {
            display: none;
        }

        .news-set-label {
            position: relative;
            display: block;
            padding: 1px;
            border-radius: 0.48rem;
            height: 0.44rem;
            background-color: white;
            cursor: pointer;
            vertical-align: top;
            -webkit-user-select: none;
        }

        .news-set-label:before {
            content: '';
            display: block;
            border-radius: 0.48rem;
            height: 0.44rem;
            background-color: #D8D8D8;
            -webkit-transform: scale(1, 1);
            -webkit-transition: all 0.3s ease;
        }

        .news-set-label:after {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -0.2rem;
            margin-left: -0.22rem;
            width: 0.44rem;
            height: 0.42rem;
            border-radius: 0.44rem;
            background-color: white;
            box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.08);
            -webkit-transform: translateX(-0.18rem);
            -webkit-transition: all 0.3s ease;
        }

        .news-set-checkbox:checked ~ .news-set-label:after {
            -webkit-transform: translateX(0.2rem);
        }

        .news-set-checkbox:checked ~ .news-set-label:before {
            background-color: #2C68FF;
        }

        .news-set-fh {
            color: rgba(153, 153, 153, 0.6);
        }

        .news-set-frequency {
            color: #2C68FF;
            line-height: 0.36rem;
            margin-right: 0.1rem;
        }

        .news-set-iconfanhui{
            color: rgba(153, 153, 153, 0.6);
        }
    </style>
</head>
<body>

<div class="flex-column h-100-p ff400">
    <!--状态栏-->
    <div class="placeholder-top flex-column bg-white">
        <!--状态栏-->
        <div class="status-bar"></div>
        <!--标题栏-->
        <div class="nav-bar flex-row justify-content-between c-white align-items-center">
            <div class="left-bar" onclick="clickBack()">
                <span class="iconfont iconfanhui1 fs16"></span>
            </div>
            <div class="center-bar fs16 ff500 line1">消息设置</div>
            <div class="right-bar">
            </div>
        </div>
    </div>
    <div class="flex-1">
        <div class="news-set-tz">
            <div class="flex-row align-items-center justify-content-between">
                <div class="flex-column">
                    <div class="fs15 c-222">新消息通知</div>
                    <div class="news-set-tip fs12">在手机系统“设置”-“通知”中找到应用进行修改</div>
                </div>
                <div class="news-set-kg flex-row align-items-center">
                    <div class="news-set-isOpen fs13"></div>
                </div>
            </div>
        </div>
        <div class="news-set-ts fs13">
            设置提醒消息类型
        </div>
        <div class="news-set-wrap fs15">
            <!--
                        <div class="news-set-item flex-row justify-content-between">
                            <div>系统公告</div>
                            <div class="news-set-switch">
                                <div class="news-set-con">
                                    <input id="checkesd_sysReceive"  type="checkbox" class="news-set-checkbox" onclick="updateSysReceiveState(pm.userId, pm.sysReceiveState)"/>
                                    <label for="checkesd_sysReceive" class="news-set-label"></label>
                                </div>
                            </div>

                        </div>
                        -->
            <div class="news-set-item flex-row justify-content-between align-items-center">
                <div>资讯推送</div>
                <div class="news-set-switch">
                    <div class="news-set-con">
                        <input id="checkesd_infoReceive" type="checkbox" class="news-set-checkbox"
                               onclick="checkInfoStatus(pm.infoReceiveState)"/>
                        <label for="checkesd_infoReceive" class="news-set-label"></label>
                    </div>
                </div>
            </div>

            <div class="news-set-item align-items-center flex-row justify-content-between" onclick="alertChoose()">
                <div class="justify-content-center align-items-center"><div>资讯推送频率</div></div>
                <div class="fs13 flex-row align-items-center">
                    <span class="news-set-count"></span>
                    <span class="news-set-fh fs9 ml5"></span>
                    <div class=" flex-row align-items-center">
                        <div class=" flex-row align-items-center">
                            <div class="news-set-frequency ff400 fs13" ></div>
                            <div class="news-set-iconfanhui iconfont iconfanhui fs9"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>

</div>
</body>
<!--这四个文件的引入必须按照顺序-->
<script src="../../js/dict.js"></script>
<script src="../../js/jquery-3.4.1.min.js"></script>
<script src="../../js/checkJsBridge.js"></script>
<script src="../../js/utils.js"></script>
<!--这四个文件的引入必须按照顺序-->
<script src="../../js/date.js"></script>
<script src="../../js/icon-font.js"></script><!--用于彩色字体图标-->
<script src="../../js/template.js"></script>
<script src="../../js/api.js"></script>


<script>
    let pm = {
      pageNum: 1,
      pageSize: 10,
      isScroll: true,
      title: '',
      sysReceiveState: '',
      infoReceiveState: '',
      infoFrequencyCode: '',
      infoFrequencyList:
            [{
              code: '1',
              desc: '每天约50+条(适合金融从业人员)'
            }, {
              code: '2',
              desc: '每天大约30条(适合普通市场参与者)'
            }, {
              code: '3',
              desc: '每天大约5条(适合只想拓展视角)'
            }]
    }

    function initPage(params) {
      //状态栏自适应
      Utils.sbhAdaptive()

      reLoadPage()
    }

    function reLoadPage() {
      //获取用户当前的设置状态
      getNewsSet()

      //当前系统消息是否开启
      getReceiveState()

    }

    //查询用户当前系统公告的消息接收状态
    function getSysReceiveStateByUserId() {
      Server.newsSet.getSysReceiveStateByUserId().then(
        function (data) {
          pm.sysReceiveState = data.sysReceiveState
          if ('1' === pm.sysReceiveState) {
            $('#checkesd_sysReceive').prop('checked', true)
          } else {
            $('#checkesd_sysReceive').prop('checked', false)
          }
        }
      )
    }

    //查询用户当前资讯的消息接收状态
    function getInfoReceiveStateByUserId() {
      Server.newsSet.getInfoReceiveStateByUserId().then(
        function (data) {
          pm.infoReceiveState = data.infoReceiveState
          if ('1' === pm.infoReceiveState) {
            $('#checkesd_infoReceive').prop('checked', true)
          } else {
            $('#checkesd_infoReceive').prop('checked', false)
          }
        }
      )
    }

    //查询用户当前资讯的消息接收频率
    function getFrequencyByUserId() {
      Server.newsSet.getFrequencyByUserId().then(
        function (data) {
          pm.infoFrequencyCode = data.frequency
          getWordByFrequency()
        }
      )}

    //获取用户当前的设置状态
    function getNewsSet() {
      getSysReceiveStateByUserId()
      getInfoReceiveStateByUserId()
      getFrequencyByUserId()
    }

    //系统公告消息接收设置
    function updateSysReceiveState(oldSysReceiveState) {
      let newSysReceiveState = ''
      if ('1' === oldSysReceiveState) {
        newSysReceiveState = '0'
      } else {
        newSysReceiveState = '1'
      }
      Server.newsSet.updateSysReceiveState({
        newSysReceiveState: newSysReceiveState
      }).then(
        function (data) {
          if (data.code === 0) {
            jsBridge.callBridge('toast', {msg: '系统公告设置成功'})
          } else {
            jsBridge.callBridge('toast', {msg: '系统公告设置失败'})
          }
          getSysReceiveStateByUserId()
        }
      )
    }

    //资讯接收设置
    function updateInfoReceiveState(oldInfoReceiveState) {
      let newInfoReceiveState = ''
      if ('1' === oldInfoReceiveState) {
        newInfoReceiveState = '0'
      } else {
        newInfoReceiveState = '1'
      }
      Server.newsSet.updateInfoReceiveState({
        newInfoReceiveState: newInfoReceiveState
      }).then(
        function (data) {
          if (data.code === 0) {
            jsBridge.callBridge('toast', {msg: '资讯推送设置成功'})
          } else {
            jsBridge.callBridge('toast', {msg: '资讯推送设置失败'})
          }
          getInfoReceiveStateByUserId()
        }
      )
    }

    //资讯消息接收频率设置
    function updateFrequency(newFrequency) {
      Server.newsSet.updateFrequency({
        newFrequency: newFrequency
      }).then(
        function (data) {
          if (data.code === 0) {
            jsBridge.callBridge('toast', {msg: '资讯消息接收频率设置成功'})
            getFrequencyByUserId()
          } else {
            jsBridge.callBridge('toast', {msg: '资讯消息接收频率设置失败'})
          }
        }
      )
    }

    //确认数据库中是否存在当前用户的资讯设置信息，如果不存在则新增
    function checkInfoStatus(oldInfoReceiveState) {
      Server.newsSet.getInfoStateNum().then(
        function (data) {
          //数据库中没有该用户的资讯信息设置，新增一条数据
          if (data.infoStateNum < 1) {
            Server.newsSet.insertInfoMsgSet().then(() => {
              updateInfoReceiveState(oldInfoReceiveState)
            }
            )
          } else {
            //资讯接收设置
            updateInfoReceiveState(oldInfoReceiveState)
          }
        }
      )
    }

    //确认数据库中是否存在当前用户的资讯设置信息，如果不存在则新增
    function checkInfoFrequency() {
      Server.newsSet.getInfoStateNum().then(
        function (data) {
          if (data.infoStateNum < 1) {
            Server.newsSet.insertInfoMsgSet()
          }
          //资讯接收频率设置
          updateFrequency(pm.infoFrequencyCode)
        }
      )
    }

    //获取当前用户的消息接收状态，判定是否需要弹出消息开启通知
    function getReceiveState() {
      jsBridge.getSysMsgState().then(data => {
        //	未开启消息通知
        if (!data.sysMsgState) {
          $('.news-set-isOpen').html('未开启')
        } else {
          $('.news-set-isOpen').html('已开启')
        }
      }
      )
    }

    //根据code查询具体频率描述
    function getWordByFrequency() {
      pm.infoFrequencyList.forEach(
        function (item) {
          if (item.code === pm.infoFrequencyCode){
            $('.news-set-frequency').html(item.desc)
          }
        }
      )
    }

    //调用原生选择弹窗获取新的频率代码
    function alertChoose() {
      jsBridge.alertChoose({msgList: pm.infoFrequencyList, selectedCode: pm.infoFrequencyCode}).then(
        data => {
          if (data.newChoose !== '-1'){
            pm.infoFrequencyCode = data.newChoose
            checkInfoFrequency()
          }
        }
      )
    }
</script>
</html>
